<style>
.drag-box.all{
    width: 120px;
    border-radius: 5px;
    opacity: 1;
}
.drag-box{
    position: fixed;
    top:0;
    left: 0;
    width: 40px;
    height: 30px;
    background: #eee;
    line-height: 30px;
    padding: 0 10px;
    opacity: 0;
    transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;

}
.cannot_select{
    -moz-user-select:none;/*火狐*/
    -webkit-user-select:none;/*webkit浏览器*/
    -ms-user-select:none;/*IE10*/
    -khtml-user-select:none;/*早期浏览器*/
    user-select:none;
}
.models{
    width: 100%;
}
    .addbox.all{
        background: #fff;
    }
    .addbox{
        width: 100%;
        background: #eee;
        height: 10px;
    }
</style>
<template>
    <section class="clearfix content">
        <aside class="fl nav-aside cannot_select">
            <ul>
                <li v-for="it in model" @mousedown="getNode(it)">{{it}}</li>
            </ul>
            <div class="asidedetail">
                <h5 @click="toggleAside"><i class="iconfont icon-zuozuo-copy"></i>返回</h5>
            </div>
        </aside>
        <aside class="fr table-aside cannot_select">
            <div class="addbox" @mouseup="setNodeNum(0)"></div>
            <div v-for="(index,it) in content" class="models">
                {{{it}}}
                <div class="addbox" @mouseup="setNodeNum(index+1)"></div>
            </div>
        </aside>
    </section>
    <div class="drag-box" id="drag-box">
        {{{nodes}}}
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                model:['h5','p'],
                nodes:'',
                content:[1],
                num:-1,
            }
        },
        methods: {
            setNodeNum: function(index){
                this.num = index;
                if(index > -1){
                    this.addNode();
                }
            },
            getNode: function(it){
                this.nodes = it;
                this.num = -1;
                $("#drag-box").addClass('all').css({left:event.clientX - 20 +'px',top:event.clientY - 15+'px'});
            },
            move: function(){
                $("#drag-box").css({left:event.clientX+'px',top:event.clientY+'px'});
            },
            pushNode: function(){
                $("#drag-box").removeClass('all').css({left:0 +'px',top:0+'px'});
            },
            addNode: function(){
                this.content = [1,2,3];
            },
            toggleAside: function(){
                $(".nav-aside>ul,.nav-aside>.asidedetail").toggleClass('all');
            },
        },
        ready: function() {
            var _this = this;
            $(document).on({'mousemove':_this.move,'mouseup':_this.pushNode});
            var loads = function(){
            }
            var name = window.location.hash.split('?')[0].replace("#/","");
            if(!name){
                name = "user";
            }
            if(!router.fn[name]){
                loads();
                router.fn[name] = loads;
            }
        }
    };

</script>